<template>
    <section id="sections">
      <p style="height:20px;line-height: 20px;font-size: 14px;font-weight: bold;color: gray;"></p>
      <div v-for="item in list" class="card" v-if="item.Name">
            <p >
              <span style="color: gray">姓名：</span>
              {{item.Name}}
              <span style="float: right;font-size: 13px;" class="one" @click="choosePaintent(item.Id,item.MyDoctorId)" v-if="item.MyDoctorId==currentDoctorId?true:false">患者详情</span>
            </p>
          <p>
            <span style="color: gray">性别：</span>
         <span v-if="item.Gender==0">
                男
              </span>
            <span v-else>女</span>
          </p>
        <p>
          <span style="color: gray">生日：</span> {{setNum(item.Birthday)}}
          <span class="two"  @click="bindPatient(item.Id)" v-if="item.MyDoctorId==currentDoctorId?false:true">绑定该患者</span>
          <span class="three" style="float: right;font-size: 13px;" v-if="item.MyDoctorId==currentDoctorId?true:false">已绑定</span>
        </p>

<br>

        </div>
    </section>
</template>

<script>
import { Toast,Indicator  } from "mint-ui";
import { getUserList, bindingPatient } from "../../api/api";
export default {
  props: [],
  name: "app",
  data() {
    return {
      list: [],
      currentDoctorId:''
    };
  },
  computed: {},
  components: {},
  created() {},
  methods: {
    getUserList() {
      Indicator.open({
        spinnerType: 'fading-circle'
      });
      let params = {
        Type: 2,
        UserId: "",
        Name: "",
        PageSize: 100,
        CurrentPage: 1
      };
      getUserList(params).then(res => {
        this.list = res.data.Result;
        Indicator.close();
      });
    },
    bindPatient(id) {
      bindingPatient({
        DoctorUserId: JSON.parse(localStorage.getItem("user")).Id,
        PatientUserId: id
      }).then(res => {
        if (res.data.IsSuccess) {
          Toast({
            message: "绑定成功",
            position: "middle",
            duration: 1000
          });
        } else {
          Toast({
            message: "已绑定了该患者",
            position: "middle",
            duration: 1000
          });
        }
        this.getUserList();
      });
    },
    choosePaintent(id, MyDoctorId) {
      localStorage.setItem("choosePatientId", id);
      if (MyDoctorId == JSON.parse(localStorage.getItem("user")).Id) {
        this.$router.push("/medicalRecord");
      } else {
        Toast({
          message: "还没绑定该患者",
          position: "middle",
          duration: 1000
        });
      }
    },
    setNum(item) {
      if (item) {
        return item.slice(0, 10);
      }
    }
  },
  mounted() {
    this.currentDoctorId=JSON.parse(localStorage.getItem("user")).Id;
    this.getUserList();
    document.getElementById("sections").style.minHeight =
      localStorage.getItem("windowHeight") + "px";
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
#sections {
  background-color: rgba(220, 220, 220, 0.2);
}
.card {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: white;
  margin-top: 20px;
  padding-top: 10px;
  position: relative;
  p {
    width: 90%;
    margin: 0 auto;
    text-align: left;
    line-height: 30px;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.one {
  background-color: rgba(0, 146, 252, 0.5);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
}
.two {
  position: absolute;
  right:5%;
  color: #6dca12;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 15px;
  height:30px;
  line-height: 30px;
  border: 1px solid #6dca12;
  top:40%;
}
.three{
  background-color: rgba(100, 238, 47, 0.8);
  color: white;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 20px;
  line-height: 20px;
  margin-top: 5px;
}
</style>
